<template>
  <div>
    <!-- 头部公共组件 -->
    <Pagetools>
      <template #left><el-tag><i class="el-icon-info" />共{{ total }}条记录</el-tag> </template>
      <template #right>
        <el-button type="danger" size="small" @click="handleDownload">普通excel导出</el-button>
        <el-button v-arrowBtn="'q3'" type="info" size="small" @click="handleDownloads">复杂表头excel导出</el-button>
        <el-button type="success" size="small" @click="$router.push({path:'/import',query:{type:'user'}})">excel导入</el-button>
        <el-button type="primary" size="small" @click="addEmp">新增员工</el-button>
      </template>
    </pagetools>
    <!-- 表格 -->
    <el-card>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index" label="序号" width="60" align="center" />

        <el-table-column sortable prop="username" label="姓名" />
        <el-table-column label="头像" align="center">
          <template slot-scope="scoped">
            <img
              v-imgError="defaultImg"
              :src="scoped.row.staffPhoto"
              alt=""
              style="width:45px; height: 45px"
            >
          </template>
        </el-table-column>
        <el-table-column sortable prop="mobile" label="手机号" />
        <el-table-column sortable prop="workNumber" label="工号" />
        <el-table-column sortable prop="zip" label="聘用形式">
          <template slot-scope="scoped">{{ formatEmployment(scoped.row.formOfEmployment) }}</template>
        </el-table-column>
        <el-table-column sortable prop="departmentName" label="部门" />
        <el-table-column sortable prop="correctionTime" label="入职时间" />
        <el-table-column sortable label="操作" width="250">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="handleClick(scope.row)"
            >查看</el-button>
            <el-button type="text" size="small">转正</el-button>
            <el-button type="text" size="small">调岗</el-button>
            <el-button type="text" size="small">离职</el-button>
            <el-button type="text" size="small" @click="roleHandle(scope.row.id)">角色</el-button>
            <el-button type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin: 20px; text-align: right">
        <el-pagination
          :current-page="currentPage4"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageObj.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <!-- 对话框 -->
    <el-dialog
      title="添加员工"
      :visible.sync="dialogFormVisible"
    >
      <empDia v-if="dialogFormVisible" @success="success" />
    </el-dialog>
    <!-- 分配角色 -->
    <el-dialog
      :visible.sync="dialogRoleVisible"
      title="分配角色"
    >
      <setRole
        v-if="dialogRoleVisible"
        ref="setRole"
        @success="dialogRoleVisible=false"
      />
    </el-dialog>
  </div>
</template>

<script>
import defaultImg from '@/assets/common/bigUserHeader.png'
import EmployeeEnum from '@/constant/employees'
import { getEmployeeList } from '@/api/employees'
// import empDia from './empDia.vue'
import setRole from './setRole.vue'
export default {
  name: '',
  components: {
    // 组件懒加载
    empDia: () => import('./empDia.vue'),
    setRole
  },
  data() {
    return {
      defaultImg,
      tableData: [],
      currentPage4: 1,
      pageObj: {
        page: 1,
        size: 5
      },
      total: 0,
      dialogFormVisible: false,
      tHeader: [],
      dialogRoleVisible: false
    }
  },
  computed: {},
  created() {
    this.loadEmp()
  },
  methods: {
    handleClick(row) {
      //  实现页面跳转 =====
      /*
      声明式导航   router-link
      编程式导航   this.$router.push()
      */
      // this.$router.push('/employees/detail/'+row.id)  === path: 'detail/:id',
      //  this.$router.push('/detail/' + row.id) //  path: '/detail/:id',
      // this.$router.push({ path: '/detail/' + row.id })
      // this.$router.push({ name: 'detail', params: { id: row.id }})
      this.$router.push({ name: 'detail', query: { id: row.id }, params: { name: 'jack' }})
    },
    async loadEmp() {
      const res = await getEmployeeList(this.pageObj)
      this.tableData = res.data.rows
      this.total = res.data.total
    },
    handleSizeChange(val) {
      this.pageObj.size = val
      this.loadEmp()
    },
    handleCurrentChange(val) {
      this.pageObj.page = val
      this.loadEmp()
    },
    formatEmployment(num) {
      // eslint-disable-next-line eqeqeq
      const obj = EmployeeEnum.hireType.find((item) => item.id == num)
      return obj ? obj.value : '未知'
    },
    addEmp() {
      this.dialogFormVisible = true
    },
    // indexAdd(index) {
    //   // console.log(this.pageObj.page, 12123)
    //   return index + 1 + (this.queryObj.page - 1) * this.queryObj.pagesize
    // }
    // 普通excel导出
    handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        // const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date']
        // const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
        // 需要导出的数据
        const list = this.tableData
        const data = this.formatJson(list)
        excel.export_json_to_excel({
          header: this.tHeader, // 表头
          data, // 显示表格数据
          filename: this.filename, // 导出的文件名
          autoWidth: this.autoWidth, // 自动匹配表格宽度
          bookType: this.bookType // 设置文件导出的类型
        })
        this.downloadLoading = false
      })
    },
    // 复杂表头excel导出
    handleDownloads() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        // const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date']
        // const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
        // 需要导出的数据
        const list = this.tableData
        const data = this.formatJson(list)
        excel.export_json_to_excel({
          multiHeader: [['编号', '主要信息', '', '', '入职时间', '', '', '', '', '']],
          merges: ['A1:A2', 'B1:D1', 'E1:E2'],
          header: this.tHeader, // 表头
          data, // 显示表格数据
          filename: this.filename, // 导出的文件名
          autoWidth: this.autoWidth, // 自动匹配表格宽度
          bookType: this.bookType // 设置文件导出的类型
        })
        this.downloadLoading = false
      })
    },
    formatJson(jsonData) {
      const map = {
        id: '编号',
        password: '密码',
        mobile: '手机号',
        username: '姓名',
        timeOfEntry: '入职日期',
        formOfEmployment: '聘用形式',
        correctionTime: '转正日期',
        wordNumber: '工号',
        departmentName: '部门',
        staffPhoto: '头像地址'
      }
      this.tHeader = Object.values(map)
      return jsonData.map(item => {
        const newObj = {} // 需要收集的字段数据
        const enKey = Object.keys(map) // 获取英文键
        enKey.forEach((key) => {
          newObj[map[key]] = item[key]
        })
        // console.log(newObj, 888)
        return Object.values(newObj)
      })
    },
    // 分配角色
    roleHandle(id) {
      this.dialogRoleVisible = true
      this.$nextTick(() => {
        this.$refs.setRole.id = id
        // console.log(id)
      })
    }
  }
}
</script>
<style lang='scss'  scoped>
</style>
